<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title><%- title %></title>
	</head>
	<body>
		<div id="app">
			<style>
				html {
					/* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
					line-height: 1.15;
				}

				html[data-theme="dark"] .app-loading {
					background-color: #2c344a;
				}

				html[data-theme="dark"] .app-loading .app-loading-title {
					color: rgb(255 255 255 / 85%);
				}

				.app-loading {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					background-color: #f4f7f9;
				}

				.app-loading .app-loading-wrap {
					display: flex;
					position: absolute;
					top: 50%;
					left: 50%;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					transform: translate3d(-50%, -50%, 0);
				}

				.app-loading .dots {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 98px;
				}

				.app-loading .app-loading-title {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 30px;
					color: rgb(0 0 0 / 85%);
					font-size: 30px;
				}

				.app-loading .app-loading-logo {
					display: block;
					width: 90px;
					margin: 0 auto;
					margin-bottom: 20px;
				}

				.dot {
					display: inline-block;
					position: relative;
					box-sizing: border-box;
					width: 48px;
					height: 48px;
					margin-top: 30px;
					transform: rotate(45deg);
					animation: ant-rotate 1.2s infinite linear;
					font-size: 32px;
				}

				.dot i {
					display: block;
					position: absolute;
					width: 20px;
					height: 20px;
					transform: scale(0.75);
					transform-origin: 50% 50%;
					animation: ant-spin-move 1s infinite linear alternate;
					border-radius: 100%;
					opacity: 0.3;
					background-color: #0065cc;
				}

				.dot i:nth-child(1) {
					top: 0;
					left: 0;
				}

				.dot i:nth-child(2) {
					top: 0;
					right: 0;
					animation-delay: 0.4s;
				}

				.dot i:nth-child(3) {
					right: 0;
					bottom: 0;
					animation-delay: 0.8s;
				}

				.dot i:nth-child(4) {
					bottom: 0;
					left: 0;
					animation-delay: 1.2s;
				}

				@keyframes ant-rotate {
					to {
						transform: rotate(405deg);
					}
				}

				@keyframes ant-rotate {
					to {
						transform: rotate(405deg);
					}
				}

				@keyframes ant-spin-move {
					to {
						opacity: 1;
					}
				}

				@keyframes ant-spin-move {
					to {
						opacity: 1;
					}
				}
			</style>
			<div class="app-loading">
				<div class="app-loading-wrap">
					<img src="/logo.png" class="app-loading-logo" alt="Logo" />
					<div class="app-loading-dots">
						<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
					</div>
					<div class="app-loading-title"><%= VITE_GLOB_APP_TITLE %></div>
				</div>
			</div>
		</div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>
